<template>
    <!--登陆表单的容器-->
    <div class="login_container">
      <!--登陆区域-->
      <div class="login_box">
        <!--头像-->
        <div class="avatar_box">
          <p class="register">注册</p>
        </div>
        <!--表单-->
        <div>
          <el-form :model="registerForm" :rules="loginRules" ref="registerForm" label-width="0px" class="login_form">
            <el-form-item prop="username">
              <el-input v-model="registerForm.username" type="text" placeholder="请输入注册用户名称"
                        prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
            <el-form-item prop="phoneNumber">
              <el-input v-model="registerForm.phoneNumber" type="text" placeholder="请输入注册手机号"
                        prefix-icon="el-icon-phone-outline"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="registerForm.password" type="password" placeholder="请输入注册密码"
                        prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item prop="cardName">
              <el-input v-model="registerForm.cardName" type="text" placeholder="请输入真实姓名"
                        prefix-icon="el-icon-s-custom"></el-input>
            </el-form-item>
            <el-form-item prop="cardCode">
              <el-input v-model="registerForm.cardCode" type="password" placeholder="请输入真实身份证号"
                        prefix-icon="el-icon-mouse"></el-input>
            </el-form-item>
            <el-form-item class="login_btn">
              <div>
                <Vcode
                  :show="isShow"
                  @success="success"
                  @close="close"
                />
                <el-button type="primary" @click="submit">{{ loading ? '注册中...' : '注 册'}}</el-button>
<!--                <button @click="submit">登录</button>-->
              </div>
<!--              <el-button @click="resetForm('loginForm')">重 置</el-button>-->
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
</template>

<script>
  import Vcode from "vue-puzzle-vcode";
  import { register } from '@/api/users'
  export default {
    name: 'Register',
    data () {
      return {
        isShow: false, // 验证码模态框是否出现
        registerForm: {
          username: '',
          phoneNumber: '',
          password: '',
          cardName: '',
          cardCode: ''
        },
        verifyCodeImage: null,
        loginRules: {
          username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
          ],
          phoneNumber: [{
            required: true, validator: this.checkPhone, message: '请输入手机号', trigger: 'blur'
          }],
        },
        loading: false
      }
    },
    components:{
      Vcode
    },
    methods: {
      submit(){
        if(this.registerForm.username!== ''&&this.registerForm.password!== ''&&this.registerForm.phoneNumber!== ''){
          this.isShow = true;
        }else {
          this.NormalMsg(this, "请将所有字段填满", 'error')
        }

      },
      // 用户通过了验证
      success(msg){
        this.isShow = false; // 通过验证后，需要手动隐藏模态框
        register(this.registerForm).then(res => {
          if(res.code==200){
            this.$router.push('/login')
            return this.$message({
              message: '注册成功',
              type: 'success'
            })
          }else {
            this.NormalMsg(this, res.message, 'error')
          }
        })
      },
      // 用户点击遮罩层，应该关闭模态框
      close(){
        this.isShow = false;
      },
    }
  }
</script>

<style lang="less" scoped>
  .register{
    font-size: 40px;
    margin-left: 25px;
    margin-block: 25px;
  }
  .login_container {
    height: 100%;
    //background-color: aquamarine;
    background-size: 100%;
    background-image: url('../../public/back.jpeg');
  }

  .login_box {
    width: 450px;
    height: 480px;
    background-color: #FFFFFF;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
      width: 130px;
      height: 130px;
      border: 1px solid #EEEEEE;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin: -65px auto;
      background-color: #FFFFFF;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #EEEEEE;
      }

      img[src=""], img:not([src]) {
        opacity: 0;
        border: none;
        visibility: hidden;
        max-width: none;
      }
    }

    .login_form {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;

      .login_btn {
        display: flex;
        justify-content: flex-end;
      }

      .verifyCode_box {
        display: flex;

        .verifyCode {
          width: 70%;
          justify-content: left;
        }

        .verifyCode_img {
          padding-left: 5px;
          padding-top: 2px;
          width: 25%;
          height: 35px;
          justify-content: flex-end;
          cursor: pointer;
        }
      }
    }
  }
</style>
